import { cn } from "common-web";
import type React from "react";

export type AvatarShape = "circle" | "square";
export type AvatarSize = "sm" | "md" | "lg";

type AvatarProps = Omit<
  React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>,
  "size"
> & {
  shape?: AvatarShape | undefined;
  size?: AvatarSize | undefined;
};

/**
 * 基本事件示例
 */
export default function Avatar({ shape, size, className, ...p }: AvatarProps) {
  const shapeClass = () => {
    switch (shape) {
      case "square":
        return "rounded-sm";
      default:
        return "rounded-full";
    }
  };

  const sizeClass = () => {
    switch (size) {
      case "sm":
        return "px-2 py-1 h-8  p-0 w-8  text-sm";
      case "lg":
        return "px-4 py-2 h-12 p-0 w-12 text-lg";
      default:
        return "px-4 py-2 h-10 p-0 w-10 text-sm";
    }
  };

  return (
    <img
      className={cn(
        "ring-2 ring-gray-200 border border-gray-300 flex items-center justify-center",
        sizeClass(),
        shapeClass(),
        className,
      )}
      alt="Avatar"
      {...p}
    />
  );
}
